<template>
  <div class="billing-method-table">
    <el-table
      :data="data"
      v-loading="loading"
      style="width: 100%"
      border
      stripe
      :empty-text="emptyText"
    >
      <el-table-column prop="id" label="ID" width="80" align="center" />
      
      <el-table-column prop="methodName" label="计费方式名称" min-width="150">
        <template #default="{ row }">
          <span class="method-name">{{ row.methodName || row.name }}</span>
        </template>
      </el-table-column>
      
      <el-table-column prop="buildingTypeDisplayText" label="建筑类型" width="150" align="center">
        <template #default="{ row }">
          <el-tag type="info" size="small">
            {{ row.buildingTypeDisplayText || '适用于所有建筑类型' }}
          </el-tag>
        </template>
      </el-table-column>
      
      <el-table-column prop="methodType" label="计费类型" width="120" align="center">
        <template #default="{ row }">
          <el-tag :type="getTypeTagType(row.methodType || row.type)" size="small">
            {{ row.methodTypeText || getTypeText(row.methodType || row.type) }}
          </el-tag>
        </template>
      </el-table-column>
      
      <el-table-column label="单价" width="120" align="center">
        <template #default="{ row }">
          <span v-if="row.unitPrice" class="unit-price">
            ¥{{ formatPrice(row.unitPrice) }}
          </span>
          <span v-else class="text-muted">-</span>
        </template>
      </el-table-column>
      
      <el-table-column label="固定金额" width="120" align="center">
        <template #default="{ row }">
          <span v-if="row.fixedAmount" class="fixed-amount">
            ¥{{ formatPrice(row.fixedAmount) }}
          </span>
          <span v-else class="text-muted">-</span>
        </template>
      </el-table-column>
      
      <el-table-column prop="description" label="描述" min-width="150">
        <template #default="{ row }">
          <span class="description-text">{{ row.description || '-' }}</span>
        </template>
      </el-table-column>
      
      <el-table-column prop="remark" label="备注" min-width="150">
        <template #default="{ row }">
          <span class="remark-text">{{ row.remark || '-' }}</span>
        </template>
      </el-table-column>
      
      <el-table-column prop="status" label="状态" width="100" align="center">
        <template #default="{ row }">
          <el-tag :type="row.status === 1 ? 'success' : 'danger'" size="small">
            {{ row.status === 1 ? '启用' : '禁用' }}
          </el-tag>
        </template>
      </el-table-column>
      
      <el-table-column prop="createTime" label="创建时间" width="180" align="center">
        <template #default="{ row }">
          <span class="time-text">{{ formatTime(row.createTime) }}</span>
        </template>
      </el-table-column>
      
      <el-table-column label="操作" width="150" align="center" fixed="right">
        <template #default="{ row }">
          <el-button
            type="primary"
            size="small"
            @click="handleEdit(row)"
            :icon="Edit"
          >
            编辑
          </el-button>
          <el-button
            type="danger"
            size="small"
            @click="handleDelete(row)"
            :icon="Delete"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    

  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { Edit, Delete } from '@element-plus/icons-vue'
import { formatDateTime } from '@/utils/date'

// Props
interface Props {
  data: any[]
  loading?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  loading: false
})

// Emits
const emit = defineEmits<{
  edit: [row: any]
  delete: [row: any]
  add: []
}>()

// 计算属性
const emptyText = computed(() => {
  if (props.loading) {
    return '加载中...'
  }
  return '暂无计费方式数据'
})

// 方法
const getTypeTagType = (type: number) => {
  const typeMap: Record<number, string> = {
    0: 'primary',   // 按面积计费
    1: 'success',   // 固定费用
    2: 'warning',   // 阶梯计费
    3: 'info',      // 按表计费
    4: 'danger'     // 阶梯电价
  }
  return typeMap[type] || 'info'
}

const getTypeText = (type: number) => {
  const typeMap: Record<number, string> = {
    0: '按面积计费',
    1: '固定费用',
    2: '阶梯计费',
    3: '按表计费',
    4: '阶梯电价'
  }
  return typeMap[type] || '未知类型'
}

const formatPrice = (price: any) => {
  if (price === null || price === undefined || price === '') {
    return '0.00'
  }
  
  // 转换为数字并格式化
  const numPrice = parseFloat(price)
  if (isNaN(numPrice)) {
    return '0.00'
  }
  
  return numPrice.toFixed(2)
}

const formatTime = (time: string) => {
  return formatDateTime(time)
}

const handleEdit = (row: any) => {
  emit('edit', row)
}

const handleDelete = (row: any) => {
  emit('delete', row)
}
</script>

<style scoped>
.billing-method-table {
  width: 100%;
}

.method-name {
  font-weight: 600;
  color: #303133;
}

.billing-params {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.param-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.param-label {
  color: #909399;
  font-size: 12px;
}

.param-value {
  color: #409eff;
  font-weight: 600;
  font-size: 12px;
}

.text-warning {
  color: #e6a23c;
  font-weight: 500;
}

.text-muted {
  color: #909399;
  font-size: 12px;
}

.unit-price {
  color: #409eff;
  font-weight: 600;
  font-size: 14px;
}

.fixed-amount {
  color: #67c23a;
  font-weight: 600;
  font-size: 14px;
}

.description-text {
  color: #606266;
  font-size: 14px;
  line-height: 1.4;
}

.time-text {
  color: #909399;
  font-size: 12px;
}

:deep(.el-table) {
  border-radius: 8px;
  overflow: hidden;
}

:deep(.el-table th) {
  background-color: #f5f7fa;
  color: #303133;
  font-weight: 600;
  padding: 8px 0;
}

:deep(.el-table td) {
  padding: 8px 0;
}

:deep(.el-table .el-table__empty-block) {
  min-height: 120px;
}

:deep(.el-table .el-table__empty-text) {
  color: #909399;
  font-size: 14px;
}

:deep(.el-button) {
  margin: 0 2px;
}
</style>
